<template>
	<view :style="{'height':navBarHeight+'px'}">
		<FruitNavigator></FruitNavigator>
	</view>
	
	<view class="fruit-body-container">
		<scroll-view scroll-y="true" :scroll-top="leftScrollTop" class="fruit-left-container" 
				:style="{'height':scrollHeight-navBarHeight+'px','top':stickyTop+'px'}">
			<view style="padding-bottom: 115rpx;">
				<view class="fruit-left-item" :id="'menu-'+index"
						v-for="(item,index) in data.fruitKind" :key="index"
						:class="data.currentIndex==index?'fruit-left-item-active':''"
						@tap="onChangeCate(item,index)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<view class="fruit-right-container">
			<view class="fruit-right-item" v-for="(itemList,index) in data.fruitItem" :key="index">
				<view class="fruit-right-item-title">
					{{itemList.fruitKindName}}
				</view>
				<view class="fruit-right-item-content">
					<view class="product_item" >
						<view v-for="(cell,cIndex) in itemList.fruitItemList" :key="cIndex" style="width: 550rpx;">
							<FruitItem :fruitInfo="cell" :count="data.fruitOrder[data.fruitOrder.findIndex(item1 => item1.fruitInfo.id === cell.id)].count" @changePrice="goPrice($event,cell)"></FruitItem>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="fruit-popup-container" v-if="showPop">
		<view class="box" @tap="changePop(false)"></view>
		<view class="fruit-popup">
			<view class="fruit-popup-title">已点</view>
			<scroll-view class="" style="max-height: 600rpx;" scroll-y="true">
				<view v-for="(cell,cIndex) in data.fruitOrder" :key="cIndex" >
					<FruitItem v-show="cell.count" :fruitInfo="cell.fruitInfo" :count="cell.count" @changePrice="goPrice($event,cell.fruitInfo)"></FruitItem>
				</view>
			</scroll-view>
		</view>
	</view>
	
	
	<view class="fruit-foot-container">
		<image src="@/page_fruit/static/fruit/fruit-buy.png" mode="aspectFit" @tap="changePop(true)"></image>
		<view class="fruit-foot-price">
			<text>￥</text>{{price}}
		</view>
		<button class="fruit-foot-btn" @tap="goSettle">去结算</button>
	</view>
	
	
</template>


<script>
	import { reactive, onMounted, ref, getCurrentInstance, nextTick, computed } from "vue"
	import {cal} from '../../utils/cal.js'
	import {onShow,onPageScroll} from '@dcloudio/uni-app'
	import global from '../../config/global.js'
	import FruitNavigator from '../components/fruitNavigationBar.vue'
	import FruitItem from '../components/main-item.vue'
	export default{
		name:'fruit',
		components:{
			FruitNavigator,
			FruitItem
		},
		setup(){
			let data = reactive({
				fruitKind:[],
				fruitItem:[],
				currentIndex:0,
				isClick:false,
				hasLoading:false,
				isFirstLoading:true,
				topList:[],
				fruitOrder:[],
			})
			
			let showPop = ref(false)
			
			onShow(()=>{
				if(!data.hasLoading&&!data.isFirstLoading) getData()
				setTimeout(()=>{
					getTop()
				},100)
			})
			
			// 窗口高度
			let windowHeight = uni.getSystemInfoSync()['windowHeight'];
			let scrollHeight = uni.getSystemInfoSync()['windowHeight'];
			
			let statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			let res=wx.getMenuButtonBoundingClientRect();
			// 顶部导航栏高度
			let navBarHeight = statusBarHeight+res.height+10;
			// 左侧滚动条显示位置
			let leftScrollTop = ref(0);
			//吸顶的距离
			let stickyTop = ref(navBarHeight);
			let rightItemHeight = ref(0);
			const instance = getCurrentInstance();
			
			let price = computed(()=>{
				
				let sum = 0;
				for(const item of data.fruitOrder){
					let t = cal.cheng(item.count,item.fruitInfo.discount_price);
					sum = cal.jia(sum,t);
				}
				return sum;
			})
			
			onMounted(()=>{
				if(data.isFirstLoading) getData()
				setTimeout(()=>{
					getTop()
				},100)
			})
			
			onPageScroll(e => {
				if(!data.isClick){
					let scrollTop = parseInt(e.scrollTop);
					for(let i=0; i<data.topList.length;i++){
						if(scrollTop+windowHeight/3>= data.topList[i].top && scrollTop+windowHeight/3<= data.topList[i].bottom){
							data.currentIndex = i;
							leftScrollTop.value = data.rightItemHeight * i;
							break;
						}
					}
				}
			})
			
			function changePop(v){
				showPop.value = v
			}
			
			function getData(){
				uni.request({
					url:global.BASE_URL+'/fruit/getFruitPage',
					method:"GET",
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					success: (res) => {
						console.log(res)
						data.isFirstLoading = false
						if(res.data.code){
							data.hasLoading = true;
							data.fruitKind = res.data.data.fruitKindList
							data.fruitItem = res.data.data.fruitItemList
							for(let item of res.data.data.returnFruitItemList){
								data.fruitOrder.push({
									count:0,
									fruitInfo:item
								})
							}
						}else{
							uni.showModal({								
								title: '信息获取错误',
								content: res.data.msg,
								showCancel: false,
								confirmText: '确定',
								success:(re)=>{
									// console.log(res.data.msg,typeof(res.data.msg))
									if(res.data.msg.includes("登录失效")||res.data.msg.includes("尚未登录")){
										uni.navigateTo({
											url:'/pages/login/login'
										})
									}else uni.navigateBack()
								}
							})
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
			
			function getTop(){
				const query = uni.createSelectorQuery().in(instance)
				query.select('.fruit-left-item').boundingClientRect().selectAll('.fruit-right-item').boundingClientRect().exec((datas) => {
					if(datas){
						rightItemHeight.value = datas[0].height;
						datas[1].map((item,index) => {
							data.topList.push({
								top:parseInt(item.top - stickyTop.value),
								bottom:parseInt(item.bottom - stickyTop.value)
							})
						})
					}
				})
			}
			
			function onChangeCate(item,index){
				if(data.currentIndex==index) return ;
				data.isClick = true;
				leftScrollTop.value = rightItemHeight.value * index;
				uni.pageScrollTo({
					scrollTop:data.topList[index].top-windowHeight/4
				})
				data.currentIndex = index;
				// 改变leftScrollTop
				setTimeout(() => {
					data.isClick = false;
				}, 600)
			}
			
			function goPrice(value,cell){
				let index = data.fruitOrder.findIndex(item => item.fruitInfo.id === cell.id)
				if(index == -1){
					let obj = {
						count: value,
						fruitInfo: JSON.parse(JSON.stringify(cell))
					}
					data.fruitOrder.push(obj)
				}else{
						data.fruitOrder[index].count = value

				}
			}
			
			function goSettle(){
				let arr = [];
				for(let item of data.fruitOrder){
					if(item.count>0){
						arr.push(item)
					}
				}
				console.log(arr)
				uni.navigateTo({
					url:'/page_fruit/fruit/fruit-settle?settleInfo='+encodeURIComponent(JSON.stringify(arr))
				})
			}
			
			return {
				data,
				navBarHeight,
				scrollHeight,
				stickyTop,
				onChangeCate,
				leftScrollTop,
				goPrice,
				price,
				changePop,
				showPop,
				goSettle
			}
		}
	}
</script>


<style scoped lang="scss">
	.fruit-body-container{
		display: flex;
		flex-direction: row;
		width: 750rpx;
		
		& .fruit-left-container{
			position: sticky;
			// top: 144rpx;
			width: 170rpx;
			background-color: #efefef;
			// padding-bottom: 115rpx;
			
			& .fruit-left-item{
				text-align: center;
				width: 140rpx;
				font-size: 30rpx;
				padding: 15rpx 16rpx;
				overflow: hidden;
				line-height: 40rpx;
				background-color: #efefef;
				color: #515151;
				align-items: center;
			}
			
			& .fruit-left-item-active{
				background-color: #fff;
				color: black;
			}
		}
		
		& .fruit-right-container{
			width: 550rpx;
			padding: 10rpx 15rpx;
			padding-bottom: 115rpx;
			
			& .product_item{
				position: relative;
				// display: flex;
				width: 550rpx;
				// height: 180rpx;
				// background-color: aqua;
			}
		}
	}
	
	.fruit-foot-container{
		display: flex;
		width: 720rpx;
		padding: 0rpx 15rpx;
		position: fixed;
		bottom: 0;
		left:0;
		height: 110rpx;
		background-color: white;
		z-index: 100;
		
		& image{
			width: 60rpx;
			height: 60rpx;
			padding: 10rpx;
			margin: 15rpx 10rpx;
			border-radius: 100rpx;
			border: 3rpx solid #9BCDD2;
		}
		
		& .fruit-foot-price{
			height: 110rpx;
			line-height: 110rpx;
			font-size: 34rpx;
			
			& text{
				font-size: 25rpx;
			}
		}
		
		& .fruit-foot-btn{
			position: absolute;
			right: 35rpx;
			height: 80rpx;
			bottom: 15rpx;
			line-height: 80rpx;
			border-radius: 200rpx;
			width: 200rpx;
			background-color: #9BCDD2;
			color: white;
			font-size: 33rpx;
		}
	}
	
	.fruit-popup-container{
		width: 100%;
		height: 100%;
		position: relative;
		
		// background-color: aqua;
		// z-index: 100;
		
		& .box{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			bottom: 0rpx;
			right: 0rpx;
			background-color: rgba(0, 0, 0, 0.4);
			transition: .3s;
			z-index: 10;
		}
		
		& .fruit-popup{
			position: fixed;
			bottom: 110rpx;
			background-color: white;
			width: 730rpx;
			padding: 10rpx;
			z-index: 100;
		}
	}
	
</style>